<template>
  <div class="box">
    <div class="header">
      <div class="headerInner">
        <div class="logo clearFix">
          <router-link class="logoLink" to="/home">唯品会</router-link>
        </div>
        <div class="service"></div>
      </div>
    </div>
    <div class="content">
      <div class="contentInner">
        <div class="contentPanel">
          <form>
            <div class="contentPanelBody">
              <div class="panelNav">
                <a class="panelNavL" href="###">扫码登录</a>
                <a class="panelNavR" href="###">账号登录</a>
              </div>
              <div class="panelContent">
                <div class="panelForm">
                  <div class="panelItem">
                    <div class="input">
                      <span
                        class="iconfont icon-cedaohang-zhanghao zhanghaotu clearFix"
                      ></span>
                      <input
                        class="zhanghao"
                        type="text"
                        placeholder="手机号/用户名/邮箱"
                        v-model="phone"
                      />
                      <span class="iconfont icon-guanbi1 qingkongtu"></span>
                    </div>
                    <div class="errorText">请输入登录名</div>
                  </div>
                  <div class="panelItem">
                    <div class="input">
                      <span class="iconfont icon-iconfontmima zhanghaotu clearFix"></span>
                      <input
                        class="zhanghao"
                        type="text"
                        placeholder="密码"
                        v-model="password"
                      />
                      <span class="iconfont icon-guanbi1 qingkongtu"></span>
                    </div>
                    <div class="errorText">请输入登录名</div>
                  </div>
                  <div class="otherItem">
                    <div class="itemMain">
                      <a class="itemInfo" href="###">短信验证登录</a>
                    </div>
                    <div class="itemMain">
                      <a class="itemInfo" href="###">忘记密码</a>
                    </div>
                  </div>
                  <div class="panelBtn">
                    <a class="login" @click.prevent="login">登 录</a>
                  </div>
                  <div class="weixin">
                    <a class="iconfont icon-weixin weixintu"></a>
                  </div>
                  <div class="loginMethod">
                    <div class="one">
                      <a class="weibo" href="###">新浪微博</a>
                    </div>
                    <ul class="two">
                      <li class="qq"><a href="###">QQ</a></li>
                      <li class="zhifubao"><a href="###">支付宝</a></li>
                    </ul>
                    <div class="three">
                      <a class="xiala" href="###">
                        <span class="gengduo">收起</span>
                        <span class="iconfont icon-xiangshang xiangxia"></span>
                      </a>
                    </div>
                    <div class="four">
                      <router-link class="zhuce" to="/register">免费注册</router-link>
                    </div>
                  </div>
                  <div class="show" >
                      <ul class="showMain">
                        <li><a href="###">网易</a></li>
                        <li><a href="###" style="color:#000;">人人网</a></li>
                        <li><a href="###">开心网</a></li>
                        <li><a href="###" style="color:#000;">翼支付</a></li>
                      </ul>
                      <div class="hint">
                        <span class="iconfont icon-tishi bTishi"></span>
                        <p class="bText">关于建行、中国移动登录失效通知，请查看</p>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footerMain">
        <p class="zhengjian">
          Copyright 2008-2020 vip.com，All Rights Reserved ICP证：粤 B2-20080329
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      phone: "13700000000",
      password: "111111"
    };
  },
  methods: {
    async login() {
      let { phone, password } = this;
      if (phone && password) {
        try {
          await this.$store.dispatch('userLogin', { phone, password });
          alert("登录成功，即将跳转到首页");
          // let redirect = this.$route.query.redirect || "/";
          this.$router.push('/home');
        } catch (error) {
          alert("登录失败");
        }
      }
    }
  },
};
</script>

<style lang="less" scoped>
.clearFix::after {
  content: "";
  display: block;
  clear: both;
}
.box {
  width: 100%;
  .header {
    width: 100%;
    .headerInner {
      position: relative;
      z-index: 1;
      margin-right: auto;
      margin-left: auto;
      width: 1000px;
      height: 100px;
      zoom: 1;
      .logo {
        display: inline;
        float: left;
        .logoLink {
          width: 125px;
          height: 100px;
          background-image: url(//member-ssl.vipstatic.com/img/passport/sprites-hash-c9975078.png?1d3187cc);
          background-position: -308px -57px;
          display: inline-block;
          vertical-align: top;
          line-height: 500px;
          overflow: hidden;
        }
      }
      .service {
        background-image: url(//member-ssl.vipstatic.com/img/passport/sprites-hash-c9975078.png?1d3187cc);
        background-position: 0 0;
        width: 304px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
      }
    }
  }
  .content {
    width: 100%;
    height: 650px;
    background-color: #faa8ac;
    .contentInner {
      width: 1000px;
      height: 650px;
      margin: 0 auto;
      background-image: url(//b.appsimg.com/upload/momin/2020/12/14/15/1607915393371.jpg);
      background-position: -460px 0;
      padding: 50px 20px;
      box-sizing: border-box;
      .contentPanel {
        width: 360px;
        height: 480px;
        background-color: white;
        float: right;
        .contentPanelBody {
          width: 100%;
          height: 322px;
          .panelNav {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            border-bottom: 1px solid #666;
            display: flex;
            .panelNavL {
              width: 50%;
              height: 50px;
              position: relative;
              text-decoration: none;
              &:hover {
                color: #f10a85;
              }
              &::after {
                content: "";
                width: 1px;
                height: 20px;
                background-color: #666;
                position: absolute;
                top: 17px;
                right: 0;
              }
            }
            .panelNavR {
              width: 50%;
              height: 50px;
              color: #f10a85;
              text-decoration: none;
              &:hover {
                color: #f10a85;
              }
            }
          }
          .panelContent {
            width: 100%;
            height: 230px;
            .panelForm {
              width: 300px;
              height: 271px;
              margin: 40px auto 0;
              // background-color: pink;
              box-sizing: border-box;
              .panelItem {
                .input {
                  width: 100%;
                  height: 46px;
                  line-height: 46px;
                  border: 1px solid #f10a85;
                  border-radius: 4px;
                  .zhanghaotu {
                    font-size: 22px;
                    float: left;
                    margin-left: 10px;
                  }
                  .zhanghao {
                    width: 230px;
                    height: 30px;
                    border: none;
                    outline: none;
                    margin: 8px 0 0 10px;
                    padding-left: 5px;
                    box-sizing: border-box;
                    font-size: 14px;
                  }
                  .qingkongtu {
                    float: right;
                    font-size: 16px;
                    color: #f10a85;
                    margin-right: 10px;
                  }
                }
                .errorText {
                  color: red;
                  font-size: 12px;
                  margin: 5px 0;
                }
              }
              .otherItem {
                width: 100%;
                height: 20px;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                margin: 10px 0 18px 0;
                .itemMain {
                  height: 20px;
                  line-height: 20px;
                  .itemInfo {
                    text-decoration: none;
                    &:hover {
                      color: #f10a85;
                    }
                  }
                }
              }
              .panelBtn {
                width: 100%;
                height: 46px;
                background-color: #f10a85;
                border-radius: 4px;
                margin-left: 1px;
                .login {
                  display: block;
                  width: 100%;
                  height: 100%;
                  line-height: 46px;
                  font-size: 18px;
                  color: white;
                  font-weight: 700;
                  text-align: center;
                  word-spacing: 10px;
                  cursor: pointer;
                }
              }
              .weixin {
                width: 100%;
                padding-top: 20px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                &::before {
                  content: "";
                  width: 100px;
                  border-bottom: 1px solid #ccc;
                }
                &::after {
                  content: "";
                  width: 100px;
                  border-bottom: 1px solid #ccc;
                }
                .weixintu {
                  font-size: 40px;
                  color: #01da6b;
                  &:hover {
                    cursor: pointer;
                  }
                }
              }
              .loginMethod {
                width: 100%;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .one {
                  margin-right: 20px;
                  position: relative;
                  .weibo {
                    font-size: 12px;
                  }
                  &::after {
                    content: "";
                    display: inline-block;
                    height: 12px;
                    border-right: 1px solid #666;
                    position: absolute;
                    top: 2px;
                    right: -10px;
                  }
                  &::before {
                    content: "";
                    display: inline-block;
                    height: 12px;
                    border-right: 1px solid #666;
                    position: absolute;
                    top: 2px;
                    right: -60px;
                  }
                }
                .two {
                  display: flex;
                  li {
                    margin-right: 20px;
                    > a {
                      color: #000;
                      &:hover {
                        color: #f10a85;
                      }
                    }
                  }
                }
                .three {
                  .xiala {
                    .gengduo {
                      margin-right: 6px;
                    }
                    .xiangxia {
                      font-size: 12px;
                    }
                  }
                }
                .four {
                  margin-left: 20px;
                  .zhuce {
                    font-size: 12px;
                    color: #000;
                    &:hover {
                      color: #f10a85;
                    }
                  }
                }
              }
              .show{
                width: 100%;
                height: 50px;
                // background-color: #01da6b;
                margin-top: 6px;
                .showMain{
                  width: 100%;
                  display: flex;
                  padding-top: 6px;
                  margin-bottom: 8px;
                  position: relative;
                  
                  li{
                    margin-right: 36px;
                    +li::before{
                      content: '';
                      display: block;
                      height: 10px;
                      border-left: 1px solid #000;
                      position: absolute;
                      top: 9px;
                      margin-left: -20px;
                    }
                  }
                }
                .hint{
                  width: 100%;
                  display: flex;
                  align-items: center;
                  .bTishi{
                    font-size: 14px;
                    margin: 0 3px;
                    color: #249FDF;
                  }
                  .bText{
                    font-size: 10px;
                    margin-top: -2px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    .footerMain {
      width: 1000px;
      height: 60px;
      line-height: 60px;
      margin: 0 auto;
      .zhengjian {
        font-size: 12px;
        text-align: center;
      }
    }
  }
}
</style>
